<script setup name="visualPannel2">
import purchaseBoard1 from "@/views/visual/modules/purchaseBoard1.vue";
import purchaseBoard2 from "@/views/visual/modules/purchaseBoard2.vue";
import purchaseBoard3 from "@/views/visual/modules/purchaseBoard3.vue";
import purchaseBoard4 from "@/views/visual/modules/purchaseBoard4.vue";
import purchaseBoard5 from "@/views/visual/modules/purchaseBoard5.vue";
import moment from "moment";

const updateTime = ref("");
const timer = ref();
const key = ref(0);

const time = ref(300);

// 自动更新时间五分钟
const updateData = () => {
  timer.value = setInterval(() => {
    if (time.value > 0) {
      time.value--;
      const duration = moment.duration(time.value * 1000); // 转换为毫秒

      const minutes = duration.asMinutes(); // 总分钟数（包含小数部分）
      const wholeMinutes = Math.floor(minutes); // 取整得到分钟数
      const remainingSeconds = Math.round((minutes - wholeMinutes) * 60); // 计算剩余的秒数
      updateTime.value = `${wholeMinutes}分${remainingSeconds}秒`;
    } else {
      time.value = 300;
      key.value++;
    }
  }, 1000);
};

onMounted(updateData);
onUnmounted(() => {
  timer.value >= 0 && clearInterval(timer.value);
});
</script>

<template>
  <div class="ps_board">
    <div>
      <ps-header :showDecoration5="false" :updateTime="updateTime" />
    </div>

    <div class="purchaseBoard-content">
      <div class="purchaseBoard-content-main">
        <div class="left">
          <purchaseBoard1 :key="key"></purchaseBoard1>
        </div>

        <div class="right">
          <purchaseBoard2 :key="key"></purchaseBoard2>
        </div>
      </div>

      <div class="purchaseBoard-content-sub">
        <div class="left">
          <div class="left-item">
            <purchaseBoard3 :key="key"></purchaseBoard3>
          </div>
          <div class="left-item">
            <purchaseBoard4 :key="key"></purchaseBoard4>
          </div>
        </div>

        <div class="right scroll-data">
          <purchaseBoard5 :key="key"></purchaseBoard5>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ps_board {
  display: flex;
  flex-direction: column;

  .purchaseBoard-content {
    height: 100%;
  }

  .purchaseBoard-content-main {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
  }

  .purchaseBoard-content-sub {
    width: 100%;
    height: 66%;
    display: flex;
    justify-content: space-around;
  }

  .left {
    width: 24%;
    height: 100%;
  }

  .right {
    width: 74%;
    height: 100%;
  }

  .left-item {
    width: 100%;
    height: 50%;

    &:first-child {
      padding-bottom: 10px;
    }
  }
}
</style>
